<template>
    <el-row class="main">
    <el-col :span="5" class="l-box">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>个人信息</span>
        </div>
        <!-- 头像 -->
        <div class="userimg">
          <el-upload
            class="avatar-uploader"
            :action="updataImgUrl"
            :data="imgdata"
            :show-file-list="false"
            :on-success="updataOk"
            :before-upload="checkImg">
          <img  @mouseover="showImg" class="user" :src="userImg.length==0 ? defaultUserImg : userImg" />
          <div v-if="imgshow" @mouseout="showImg" class="imgIcn"></div>
          </el-upload>
        </div>
        <!-- 个人信息 -->
        <ul class="userli" style="list-style: none">
          <li>用户名称<span>{{userName}}</span></li>
          <li>用户名称<span>{{userSex==null ? '男' : userSex}}</span></li>
          <li>手机号码<span>{{iphone==null ? '暂未设置' : iphone}}</span></li>
          <li>用户邮箱<span>{{emil==null ? '暂未设置' : emil}}</span></li>
          <li>所属角色<span>{{userAuth == 2 ? '管理员' : '普通用户'}}</span></li>
          <li>创建时间<span>{{createtime}}</span></li>
          <li>修改时间<span>{{modiftime==null ? '暂未修改过' : modiftime}}</span></li>
        </ul>
      </el-card>
    </el-col>

    <el-col :span="10" class="r-box">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>基本资料</span>
        </div>
        <div>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="基本资料" name="first"></el-tab-pane>
            <el-tab-pane label="修改密码" name="second"></el-tab-pane>
          </el-tabs>
        </div>
        <div>
          <!-- 展示基本资料的路由 -->
          <router-view @updata="updataUserInfo"></router-view>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import router from "@/router";
import UserApi from '@/api/user/UserApi';
import {mapState} from 'vuex'
import uploadApi from '@/api/upload/uploadApi'
export default {
  name: "UserInfo",
  data() {
    return {
      // 头像上传的位置
      updataImgUrl: uploadApi.uploadUserimg,
      // 修改那个对象的头像
      imgdata: {"name" : sessionStorage.getItem("userName")},
      imgshow: false,
      // 默认第一个标签高亮
      activeName: "first",
      // defaultUserImg: 'https://img0.baidu.com/it/u=2933144277,475331862&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500',
      userImg: require("../../assets/头像.jpg"),
      userName: '这是哪头猪',
      userSex: '男',
      iphone: 1314520,
      emil: 'koi-pig@qq.com',
      userAuth: 2,
      createtime: '2022-10-01 10:01:50',
      modiftime: '520-1314'
    };
  },
  computed: {
    ...mapState({
      // 获取vuex的默认头像地址
      defaultUserImg: state => state.UserInfo.defaultUserImg,
    }),
  },
  methods: {
    // elm标签页自带的事件函数事件
    handleClick(tab, event) {
      // console.log(tab._props.label);
      if (tab._props.label == "基本资料") {
        // 跳转查看用户基本信息
        router.push({ path: "/frontHome/userInfo/" });
      } else {
        // 跳转修改密码
        router.push({ path: "/frontHome/userInfo/userPwd" });
      }
    },
    updataUserInfo(){
      UserApi.UserInfo().then(res => {
      this.userImg=res.data.data.avatar;
      this.userName=res.data.data.name;
      this.userSex=res.data.data.sex;
      this.iphone=res.data.data.iphone;
      this.emil=res.data.data.emil;
      this.userAuth=sessionStorage.getItem('userAuth');
      this.createtime=res.data.data.createtime;
      this.modiftime=res.data.data.modiftime;
      this.userInfo=res.data.data;
    })
    },
    showImg(){
      this.imgshow=!this.imgshow
    },
    // 头像上传成功的回调
    updataOk(res, file){
      this.$message.success("修改用户头像成功");
      this.userImg="/User-Img/"+res.data
      // 将图片地址传到vuex
      this.$store.commit("UserInfo/updataUserImg",this.userImg)
      // 重新查询用户信息并渲染
      this.updataUserInfo()
    },
    // 上传前的钩子函数
    checkImg(file){
       const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
    }
  },
  created() {
    this.updataUserInfo();
  }
};
</script>

<style scoped>
.main {
  /* left: 20px;
  top: 50px;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden; */
  /* background: rgb(236, 193, 193); */
}

.l-box,
.r-box {
  background: pink;
}
.l-box {
  margin-left: 30px;
}
.l-box > .box-card {
  width: auto;
  height: 520px;
}

.r-box {
  margin-left: 20px;
}
.r-box > .box-card {
  width: auto;
  height: 520px;
}
.userimg {
  border-bottom: 1px solid rgb(237, 238, 240);
  padding-bottom: 20px;
}
.user {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  /* 经过有小手 */
  cursor: pointer;
  left: 100%;
  top: 60px;
  position: relative;
  overflow: hidden;
  transform: translate(-50%, -50%);
}
.userli > li {
  padding-top: 15px;
  border-bottom: 1px solid rgb(237, 238, 240);
}
.userli > li > span {
  float: right;
}

.imgIcn {
  width: 120px;
  height: 120px;
  background-color: rgb(51, 32, 32);
  opacity: 0.5;
  border-radius: 50%;
  position: absolute;
  top: 80px;
  left: 108px;
}

.l-box[data-v-30b77979], .r-box[data-v-30b77979] {
    /* background: pink; */
    left: 17%;
    position: relative;
}

</style>